<template>
    <h1>整合TS开始--泛型-自定义类型</h1>
    <div class="container">
        <p>{{person.name}}</p>
        <p>{{person.age}}</p>
        <p>{{person.id}}</p>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
// 为了区分出引入的是接口,还是普通的变量;所以要在引入接口interface的时候,加上type来表明
    import {type Person ,type Persons} from '@/types';
    let person:Person = reactive( {
        id:'asdasd',
        name:'张三',
        age:18
    })
    let persons:Persons = [
        {
            id:'asdasd',
            name:'张三',
            age:18
        }
    ]
</script>

<style scoped>
    .container{
        background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
</style>